<template>
<div class="header" v-if="this.$store.state.islogin">
  <!--  v-if="this.$store.state.islogin" -->
  <ol class="ol1">
    <li class="li1" v-for="(item,index) in list" :key="index">
      {{item.label}}
      <el-button :class="item.icon"></el-button>
    
    </li>
  </ol> 
  



  
</div>
</template>

<script>
export default {
  data(){
    return{
       list: [
        {
          path: "/home",
          name: "home",
          label: "产品详情",
          icon: "el-icon-caret-bottom",
          url: "Home/Home"
        },
        {
          path: "/goods",
          name: "goods",
          label: "合作伙伴",
          icon: "el-icon-caret-bottom",
          url: "MallManage/MallManage"
        },
        {
          path: "/user",
          name: "user",
          label: "其它",
          icon: "el-icon-more",
          url: "UserManage/UserManage"
        },
          {
          path: "/user",
          name: "user",
          label: "已登录",
          icon: "el-icon-s-check",
          url: "UserManage/UserManage"
        },
        ]
    }

  },
  mounted(){
   //发送数据请求
    //   this.$axios.get("/api/user_lists").then(res=>{
    //    this.list[4].label = res.data.params.data.username
    //    console.log();
    // })
  }

}
</script>

<style lang="less" scoped>
.header{
  width: 100%;
  height: 70px;
  background-color: #1685a9;
  user-select: none;
  border: 1px solid rgb(235, 129, 129);

}
.ol1{
  width: 100%;
  height: 60px;
  margin-left: 0%;
  margin-top: 0%;
  display: flex;
  list-style: none;
}
.ol1>.li1{
  width: 10%;
  height: 50px;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-top: none;
  margin-left: 1%;
  margin-top: 1%;
  color: white;
  line-height: 40px;
  font-family: '宋体' ;
  text-align: center;
}
.li1:nth-child(4){
  position: absolute;
  right: 5%;
}

.li1:hover {
  background-color: aquamarine;
}
 /deep/ .el-icon-caret-bottom{
  width: 10px;
  height: 10px;
  margin-left: 4px;
  line-height: 0px;
  background-color: #2d2c2c;
  color: white;
  
}
 /deep/ .el-icon-more{
  width: 10px;
  height: 10px;
  margin-left: 4px;
  line-height: 0px;
  background-color: #2d2c2c;
  color: white;
  
}
 /deep/ .el-icon-s-check{
  width: 10px;
  margin-left: 4px;
  line-height: 1px;
  background-color: #2d2c2c;
  color: white;
 }




</style>